<template>
    <div class="left_content">
        <PanelWrap class="ssgk_panel">
            <template #top>
                <div class="panel_fun" @click="showSCInfo">
                    <span class="fun_label">详情</span>
                    <span class="fun_icon"></span>
                </div>
            </template>
            <template #mainContent>
                <div class="ssgk_content">
                    <div class="ssgk_statis">
                        <div class="ss_item jssb">
                            <span class="label1">结算水表</span>	
                            <span class="label2"><span class="num">27,483</span><span>只</span></span>
                        </div>
                        <div class="ss_item ysh">
                            <span class="label1">用水户</span>
                            <span class="label2"><span class="num">85,693</span>&nbsp;户</span>
                        </div>
                        <div class="ss_item gxcd">
                            <span class="label1">管线长度</span>
                            <span class="label2"><span class="num">44,256</span>&nbsp;km</span>
                        </div>
                        <div class="ss_item fgmj">
                            <span class="label1">覆盖面积</span>
                            <span class="label2"><span class="num">44,589</span>&nbsp;k㎡</span>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="ssgk_chart">
                        <div class="tab_group">
                            <span :class="[showBallName == 'jnsc' ? 'tab_label_active' : '','tab_label']" @click="showBall('jnsc')">江南水厂</span>
                            <span :class="[showBallName == 'jbsc' ? 'tab_label_active' : '','tab_label']" @click="showBall('jbsc')">江北水厂</span>
                        </div>
                        <div class="content" v-show="showBallName == 'jnsc'">
                            <div id="ball_wrap1" class="ball_wrap">
                                <div id="liquid1"></div>
                            </div>
                            <div class="statics">
                                <span class="item">设计规模：<span class="num">15,000</span>m³</span>
                                <span class="item">日均供水：<span class="num">8,589</span>m³</span>
                                <span class="item">历史最高：<span class="num">10,080</span>m³</span>
                            </div>
                        </div>
                        <div class="content" v-show="showBallName == 'jbsc'">
                            <div id="ball_wrap2" class="ball_wrap">
                                <div id="liquid2" ref="liquid2"></div>
                            </div>
                            <div class="statics">
                                <span class="item">设计规模：<span class="num">15,000</span>m³</span>
                                <span class="item">日均供水：<span class="num">8,589</span>m³</span>
                                <span class="item">历史最高：<span class="num">10,080</span>m³</span>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </PanelWrap>
        <PanelWrap class="wgtj_panel">
            <template #top>
                <nav class="panel_tab">
                    <span :class="[gcActiveTab == 0 ? 'active':'','tab_item']" @click="checkGcTab(0)">管材</span>
                    <!-- <span class="line"></span> -->|
                    <span :class="[gcActiveTab == 1 ? 'active':'','tab_item']" @click="checkGcTab(1)">管径</span>
                </nav>
            </template>
            <template #mainContent>
                <div id="chart_gwtj"></div>
            </template>
        </PanelWrap>
        <PanelWrap class="msyl_panel">
            <template #top>
                <RefreshPanel :timeVal="curTime"></RefreshPanel>
            </template>
            <template #mainContent>
                <div id="chart_msyl"></div>
            </template>
        </PanelWrap>
        <PanelWrap class="sbsssj_panel">
            <template #top>
                <RefreshPanel :timeVal="updateTime_sbsj" refreshable="true" @reGetData="initSbsssj(1)"></RefreshPanel>
            </template>
            <template v-slot:mainContent>
                <div class="table_sbsssj my_table">
                    <div class="list_title">
                            <span class="title_item title_num">设备编号</span>
                            <span class="title_item title_type">设备类型</span>
                            <span class="title_item title_val">值</span>
                            <span class="title_item title_dc">电池</span>
                            <span class="title_item title_signal">信号</span>
                    </div>
                    <div class="table_content_wrap">
                        <div class="table_content">
                            <ul class="warning_list">
                                <li class="list_row"  v-for="(item,index) in sbsssjList" :key="index">
                                    <span class="td_item d_num">
                                        <!-- 压力表 -->
                                        <span v-if="item.code.indexOf('PR') != -1" class="YLBIcon icon"></span>
                                        <!-- 流量计 -->
                                        <span v-else-if="item.code.indexOf('FL') != -1" class="LLJIcon icon"></span>
                                        <!-- 余氯仪 -->
                                        <span v-else-if="item.code.indexOf('RC') != -1" class="YLYIcon icon"></span>
                                        {{item.code}}
                                    </span>
                                    <span class="td_item d_type">{{item.monitType | getDeviceType}}</span>
                                    <span class="td_item d_val">{{item.value}}</span>
                                    <span class="td_item d_dc">{{item.batteryValue}}</span>
                                    <span class="td_item d_signal">
                                        <span v-if="item.signalValue >= 0 && item.signalValue < 0.20" class="signal signal1"></span>
                                        <span v-else-if="item.signalValue >= 0.20 && item.signalValue < 0.40" class="signal signal2"></span>
                                        <span v-else-if="item.signalValue >= 0.40 && item.signalValue < 0.60" class="signal signal3"></span>
                                        <span v-else-if="item.signalValue >= 0.60 && item.signalValue < 0.80" class="signal signal4"></span>
                                        <span v-else-if="item.signalValue >= 0.80 && item.signalValue < 1.0" class="signal signal5"></span>
                                        <span v-else class="signal signal6"></span>
                                    </span>
                                </li>
                            </ul>
                        </div>							
                    </div>							
                </div>
            </template>				
        </PanelWrap>
    </div> 
</template>

initCharts_yjzxsl<script>
import PanelWrap from '@/components/PanelWrap'
import RefreshPanel from '@/components/RefreshPanel';
export default {
    name:'leftContent',
    components:{
        PanelWrap,
        RefreshPanel
    },
    data(){
        return{
            curTime:'2023-2-6',//当前时间 
			// dialogVisible:false,           
			gcActiveTab:0,//官网统计tab：0：管材 1：管径
			showBallName:'jbsc',//水司概况tab值
			sbsssjList:[],//设备实时数据
			updateTime_sbsj:''//设备实时数据更新时间
        }
    },
    mounted(){
        this.$nextTick(() => {
			this.initCharts();
			this.initChart_gwtj();
			this.initChart_msyl();
            this.initSbsssj();
		})
    },
    methods:{
        checkGcTab(index){
			this.gcActiveTab = index;					
			this.initChart_gwtj();
		},
        initCharts(){
			var option1 = {
				backgroundColor: '#0F224C',
				title: [
					{
						// show:true,
						// text:'江北水厂',
						// textStyle:{
						// 	color:'#ffffff'
						// }
					}
				],
				series: [
					{
						//第一个球
						type: 'liquidFill',
						radius: '100%',
						center: ['50%', '50%'],
						color: [
							{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#034D61',
									},
									{
										offset: 1,
										color: '#0FEBF4',
									},
								],
								globalCoord: false,
							},
						],
						data: [0.75], // data个数代表波浪数
						backgroundStyle: {
							borderWidth: 1,
							borderColor: '#00f0ff',
							color:{
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 1,
								colorStops: [{
									offset: 0, color: '#011A2B' // 0% 处的颜色
								},
								 {
									offset: 0.8, color: '#00394F' // 100% 处的颜色
								}
								, 
								{
									offset: 1, color: '#00f0ff' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						label: {
							normal: {
								textStyle: {
									fontSize: 18,
									color: '#fff',
								},
							},
						},
						outline: {
							// show: false
							borderDistance: 0,
							itemStyle: {
								borderWidth: 2,
								borderColor: '#112165',
							},
						},
					}			
				],
			};
			var option2 = {
				backgroundColor: '#0F224C',
				title: [
					{
						// show:true,
						// text:'江北水厂',
						// textStyle:{
						// 	color:'#ffffff'
						// }
					}
				],
				series: [
					{
						//第一个球
						type: 'liquidFill',
						radius: '100%',
						center: ['50%', '50%'],
						color: [
							{
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#034D61',
									},
									{
										offset: 1,
										color: '#0FEBF4',
									},
								],
								globalCoord: false,
							},
						],
						data: [0.75], // data个数代表波浪数
						backgroundStyle: {
							borderWidth: 1,
							borderColor: '#00f0ff',
							color:{
								type: 'radial',
								x: 0.5,
								y: 0.5,
								r: 1,
								colorStops: [{
									offset: 0, color: '#011A2B' // 0% 处的颜色
								},
								 {
									offset: 0.8, color: '#00394F' // 100% 处的颜色
								}
								, 
								{
									offset: 1, color: '#00f0ff' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						},
						label: {
							normal: {
								textStyle: {
									fontSize: 18,
									color: '#fff',
								},
							},
						},
						outline: {
							// show: false
							borderDistance: 0,
							itemStyle: {
								borderWidth: 2,
								borderColor: '#112165',
							},
						},
					}			
				],
			};
			var myChart1 = this.$echarts.init(document.getElementById('liquid1'));
			myChart1.setOption(option1);
			var myChart2 = this.$echarts.init(document.getElementById('liquid2'));
			myChart2.setOption(option2);

			//修改canvas border
			let liquid2 = this.$refs.liquid2;
		},
        initChart_gwtj(){
			let dom = document.getElementById('chart_gwtj');
			let data =  this.gcActiveTab === 0 ? [
							{ value: 15, name: '其他' },
							{ value: 38.8, name: '无缝钢管' },
							{ value: 25.8, name: 'PE管' },
							{ value: 20.4, name: '铁管' }
						] : [
							{ value: 28, name: '>=100' },
							{ value: 36, name: '>=200' },
							{ value: 22, name: '>=300' },
							{ value: 14, name: '400至600 ' }
						]
			let myChart = this.$echarts.init(dom, null, {
			renderer: 'canvas',
			useDirtyRect: false
			});
			let option = {
				tooltip: {
					trigger: 'item',
					formatter: '{c}%'
				},
				series: [					
					{
						name: 'Access From',
						type: 'pie',
						center:['50%','65%'],
						radius: ['40%', '45%'],
						labelLine: {
							length: 30
						},
						legendHoverLink:false,
						label: {
							show:false
						},
						data: data,
						itemStyle: {
							normal: {
								color: function(colors) {
									var colorList = [
										'rgba(170,50,57,0.3)', 'rgba(4,191,100,0.3)','rgba(201,158,3,0.3)','rgba(4,147,183,0.3)'
										];
									return colorList[colors.dataIndex]
								}
							}
						},

					},
					{
						name: 'Access From',
						type: 'pie',
						center:['50%','65%'],
						radius: ['50%', '60%'],
						labelLine: {
							length: 30
						},
						// legendHoverLink :false,
						label: {
							textStyle:{
								color:'#FFFFFF',
								
							},
							formatter: '{b}\n\n{c}%'
						},
						data: data,
						itemStyle: {
							normal: {
								color: function(colors) {
									var colorList = [
										'#AA3239', '#04BF64', '#C99E03','#0493B7'
										];
									return colorList[colors.dataIndex]
								}
							}
						},
					},
					{
						name: 'Access From',
						type: 'pie',
						center:['50%','65%'],
						radius: ['65%', '70%'],
						labelLine: {
							length: 30
						},
						legendHoverLink :false,
						label: {
							show:false
						},
						data: data,
						itemStyle: {
							normal: {
								color: function(colors) {
									var colorList = [
										'rgba(170,50,57,0.3)', 'rgba(4,191,100,0.3)','rgba(201,158,3,0.3)','rgba(4,147,183,0.3)'
										];
									return colorList[colors.dataIndex]
								}
							}
						},
					}
				],
				grid:{
					top:'20%'
				}
			};
			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
		},
		//余氯末梢
		initChart_msyl(){
			this.$axios.get('http://43.136.137.111:9898/system/mock/data1',{}).then(res => {
				let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: [
							{
								name:'江南',
								itemStyle:{
									color:'#FFBB0E'
								}
							},
							{
								name:'江北',
								itemStyle:{
									color:'#9BC2D4'
								}
							}
						],
						right:10,
						top:10,
						itemWidth:10,
						itemHeight:1,
						textStyle:{
							color:'#FFFFFF',
						}
					},
					grid: {
						left: '3%',
						right: '10%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data:  res.data[0].date
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: 'mg/L',
					},
					series: [
						{
							name: '江南',
							type: 'line',
							stack: 'Total',
							data: res.data[0].value,
							symbol:'none',
							lineStyle:{
								color:'#FFBB0E'
							}
						},
						{
							name: '江北',
							type: 'line',
							stack: 'Total',
							data:res.data[1].value,
							symbol:'none',
							lineStyle:{
								color:'#9BC2D4'
							},
							markLine:{
								symbol:'none',
								lineStyle:{
									color:'red',
									type:'dashed'
								},
								label:{
									color:'red',
									show:true,
									fontSize:'14'
								},
								data:[
									{
										yAxis:0.06,
										name:'最小值'
									}
								]
							}
						}
					]
				};
				var myChart = this.$echarts.init(document.getElementById('chart_msyl'));
				myChart.setOption(option);
			})
		},
		//设备实时数据
		initSbsssj(t){
			//有t表示要强制刷新
			if(t){
				this.sbsssjList = [];
			}
			this.$axios.get('http://43.136.137.111:9898/jiangan/device/rest/time/data').then(res =>{
				this.sbsssjList = res.data.data;
				this.updateTime_sbsj = res.data.updateTime;
			})
		},
		paintChart_press(data){
			let datas = [];
			let times = [];
			for (let i = 0; i < data.length; i++) {
				const element = data[i];
				datas.push(element.pressureValue);
				times.push(element.collectTime);
			}
			let option = {
					title: {
						show:false
					},
					textStyle:{
						color:'#FFFFFF',
						fontSize:'14px'
					},
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						top:'25%',
						left: '10%',
						right: '10%',
						bottom: '10%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: times
					},
					yAxis: {
						type: 'value',
						splitLine:{
							lineStyle:{
								color:'rgba(255, 255, 255, 0.2)'
							}
						},
						name: '(Mpa)'						
					},
					series: [
						{
							name: '24小时压力变化曲线',
							type: 'line',
							stack: 'Total',
							data:datas,
							symbol:'none',
							lineStyle:{
								color:'#E7A808'
							},
							areaStyle:{
								color:{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0, color: 'rgba(231, 168, 8, 0.2)' // 0% 处的颜色
									}, {
										offset: 1, color: 'rgba(231, 168, 8, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
									//background: linear-gradient(360deg, rgba(231, 168, 8, 0.2) 28.99%, rgba(231, 168, 8, 0) 100%);

								}
							}
						}
					]
					};
				var myChart = this.$echarts.init(document.getElementById('chart_press'));
				myChart.setOption(option);
		},
        closeModual(val){
			this.$emit('handleDialogVisible',val);
		},
		//查看水厂详情
		showSCInfo(){
			this.$emit('handleDialogVisible',true);
		},
		//切换显示水厂水球
		showBall(val){
			this.showBallName = val;
			this.initCharts();
		},	
    },
	filters:{
		getDeviceType(value){
			if(value == '1'){
				return '压力表';
			}else if(value == '2'){
				return '流量计';
			}else if(value == '3'){
				return '余氯仪';
			}
		}
	}
}
</script>

<style lang="less" scoped>
.left_content {
		.ssgk_panel{	
			/deep/.panel_title{
				.title_text{
					background: url('~@/assets/image/panelTitle/ssgk.png') no-repeat 20px 9px;
				}	
				.panel_fun {
					position: absolute;
					top: 0px;
					right: 10px;
					height: 32px;
					cursor: pointer;

					.fun_label {
						font-family: 'Source Han Sans CN';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 32px;
						color: rgba(255, 255, 255, 0.4);
						padding: 0 5px;
					}

					.fun_icon {
						display: inline-block;
						width: 7px;
						height: 11px;
						background: url('~@/assets/image/panelTitle/jt_y.png') no-repeat;
					}
				}
			}	
			.jssb {
				background: url('~@/assets/image/jssb.png') no-repeat;
				background-position: 10px 2px;
			}
			.ysh {
				background: url('~@/assets/image/ysh.png') no-repeat;
				background-position: 10px 2px;
			}

			.gxcd {
				background: url('~@/assets/image/gxcd.png') no-repeat;
				background-position: 10px 2px;
			}

			.fgmj {
				background: url('~@/assets/image/gxcd.png') no-repeat;
				background-position: 10px 2px;
			}
			.ssgk_content{
				.ssgk_statis{
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					margin-top: 10px;
					.ss_item {
						width: 182px;
						height: 60px;
						box-sizing: border-box;
						padding-left: 62px;
						font-family: 'Source Han Sans CN';
						font-style: normal;
						font-weight: 400;
						font-size: 14px;
						line-height: 21px;
						color: rgba(255, 255, 255, 0.7);
						display: flex;
						flex-direction: column;
						.label1{
							background: url('~@/assets/image/Rectangle 237.png');
							background-size: 86px 12px;
							background-repeat: no-repeat;
							background-position: 0px 10px;
							display: inline-block;
							text-align: center;
							width: 86px;
						}
						.label2{
							background: url('~@/assets/image/Rectangle 237.png');
							margin-top: 7px;
							width: 110px;
							background-size: 110px 24px;
							padding-left: 15px;
							box-sizing: border-box;
							.num{
								font-size: 18px;
								line-height: 22px;
								color: #B9EDFF;
							}
						}
						
					}		
				}
				.ssgk_chart{
					display: flex;
					justify-content: center;
					align-content: center;
					margin-top: 10px;
					.tab_group{
						width:100px;
						display: flex;
						justify-content: center;
						flex-direction: column;
						text-align: center;
						cursor: pointer;
						.tab_label{
							display: inline-block;
							width:86px;
							height:24px;
							margin: 5px 0px;
							font-family: 'Source Han Sans CN';
							font-style: normal;
							font-weight: 500;
							font-size: 14px;
							line-height: 24px;
							color: #B9EDFF;
						}
						.tab_label_active{
							background: url('~@/assets/image/Rectangle 649.png');
							background-size: 100% 100%;
						}
					}
					.content{
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						.ball_wrap{
							#liquid1,#liquid2{
								width:101px;
								height: 106px;
								canvas{
									border-radius: 50%;
								}
							}
						}
						.statics{
							flex:1;
							.item{
								display: inline-block;
								height: 20px;
								font-size: 14px;
								font-weight: 400;
								line-height: 20px;
								margin: 6px 0px 6px 5px;
								color: rgba(255, 255, 255, 0.7);
								.num{
									font-size: 18px;
									color: #9BC2D4;
									font-weight: 700;
									padding-right: 5px;
								}
							}
						}
					}
				}
			}
		}


		.wgtj_panel {
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/gwtj.png') no-repeat 20px 9px;
				}	
			.panel_main{
				height:140px;
				#chart_gwtj{
					width:100%;
					height: 140px;
				}
			}
		}
		.msyl_panel {
			/deep/.title_text{
				background: url('~@/assets/image/panelTitle/msyl.png') no-repeat 20px 9px;
			}
			.panel_main{				
				#chart_msyl{
					width:100%;
					height: 200px;
				}
			}
		}

		// 雨量概况
		.ylgk_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/ylgk.png') no-repeat;
				}	
			/deep/.panel_main{
				// border: 1px solid red;
				width: 100%;
				height: 110px;
				#chart_ylkg{
					width: 450px;
					height: 110px;
				}
			}		
		}

		// 重点检测
		.zdjc_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/zdjc.png') no-repeat;
				}	
				#chart_zdjc{
					width:450px;
					height: 210px;
				}
		}
		// .ycylsj_panel{
		// 	/deep/.title_text{
		// 			background: url('~@/assets/image/panelTitle/ycylsj.png') no-repeat;
		// 		}	
		// 	.my_table{
		// 		width:100%;
		// 		height: 450px;
		// 		overflow: hidden;
		// 	}
		// }
		// .ylsj_panel{
		// 	/deep/.title_text{
		// 			background: url('~@/assets/image/panelTitle/ycylsj.png') no-repeat ;
		// 		}	
		// }
		.sbsssj_panel{
			/deep/.title_text{
					background: url('~@/assets/image/panelTitle/sbsssj.png') no-repeat 20px 9px;
				}	
				.table_sbsssj{
					height: 200px;
					overflow: hidden;
					.title_type,.title_signal,.d_type,.d_signal{
						width: 70px;
					}			
					.title_num,.d_num{
						width: 90px;
					}
					.table_content_wrap{
						height: 100%;
						overflow-y: hidden;
						width: 100%;
						.table_content{
							height: auto;
							animation: myMove 50s linear infinite;
					
							/*文字无缝滚动*/
							@keyframes myMove {
								0% {
									transform: translateY(0);
								}

								100% {
									transform: translateY(-100%);
								}
							}
							.d_num{
								.icon{
									display: inline-block;
									vertical-align: middle;
									margin-right:5px;
								}
								.YLBIcon{									
									width: 16px;
									height: 10px;
									background: url('~@/assets/image/ylb.png') no-repeat;
								}
								.LLJIcon{									
									width: 14px;
									height: 17px;
									background: url('~@/assets/image/llj.png') no-repeat;
								}
							}
							.d_signal{
								.signal{
									display: inline-block;
									width: 18px;
									height: 14px;
								}
								.signal1{
									background: url('~@/assets/image/signal.png') no-repeat 0px 0px;
								}
								.signal2{
									background: url('~@/assets/image/signal.png') no-repeat -18px 0px;
								}
								.signal3{
									background: url('~@/assets/image/signal.png') no-repeat -38px 0px;
								}
								.signal4{
									background: url('~@/assets/image/signal.png') no-repeat -57px 0px;
								}
								.signal5{
									background: url('~@/assets/image/signal.png') no-repeat -76px 0px;
								}
								.signal6{
									background: url('~@/assets/image/signal.png') no-repeat -95px 0px;
								}
							}
						}

					}
					
				}
				
		}
	}
</style>